<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../lib/vue2.js"></script>

    <style>
      .red {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 组件化开发，把一部分功能的三大件合并为一个组件，方便复用，类似于函数封装 -->

    <!-- 根组件 box -->
    <div id="box">
      <!-- 可以通过给标签加属性传递参数 -->
      <my-module mydata="hello"></my-module>
    </div>

    <script>
      // 注册一个全局组件（定义时驼峰命名，调用时用-连接）
      Vue.component("myModule", {
        // template相当于html文件，规定只存在一个根节点
        // style样式只能写在行内
        template: `<div>
            <h1 class="red">大标题</h1>
            <button @click="handleClick">点击</button>{{name}}--{{mydata}}
            <child></child>
            </div>`,

        // 通过props接收参数,一般写成对象形式
        props: {
          // 参数名一致
          mydata: {
            // type规定传入类型，default为默认值
            type: String,
            default: "",
          },
        },
        // data必须是函数写法
        data() {
          return {
            name: "张三",
          };
        },
        methods: {
          handleClick() {
            console.log(1);
          },
        },

        // components定义子组件，只能内部调用，类似于函数
        components: {
          // key值为名字
          child: {
            template: `<div>child</div>`,
          },
        },


        // computed，watch也可以定义
      });

      let vm = new Vue({
        el: "#box",
      });
    </script>
  </body>
</html>
